<script setup>
import { ref } from 'vue'

const table = ref(false)
const srk = ref()
const quxiao = () => {
  srk.value = ''
  table.value = false
}
const bianji = (row) => {
  console.log(row)
  table.value = true
}
const showDialog = ref(false)
const form = ref({
  brandName: '',
})

const tableData = ref([
  { date: '2024-01-01', name: '宝马' },
  { date: '2024-02-01', name: '奔驰' },
])
</script>

<template>
  <el-button @click="showDialog = true" type="primary">+新建</el-button>

  <el-table :data="tableData" style="width: 100%; margin-top: 10px">
    <el-table-column prop="date" label="配件名称" />
    <el-table-column prop="name" label="操作">
      <template #default="{ row }">
        <el-button type="primary" @click="bianji(row)">编辑</el-button>
        <el-button style="background-color: red; color: #fff" @click="shanchu(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="showDialog" width="500px">
    <el-form label-width="120px">
      <el-form-item label="配件名称" style="width: 400px">
        <el-input v-model="form.brandName" />
      </el-form-item>
      <el-form-item>
        <div style="display: flex; justify-content: center">
          <el-button type="primary" size="mini" @click="showDialog = false">确定</el-button>
          <el-button size="mini" @click="showDialog = false">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-pagination
    style="margin-left: 800px; margin-top: 30px"
    background
    layout="prev, pager, next"
    :total="1000"
  />
  <el-drawer v-model="table" title="修改" direction="rtl" size="50%">
    <p style="margin-left: 150px">
      配件名称:<el-input v-model="srk" style="width: 200px"></el-input>
    </p>
    <el-button type="primary" style="margin-top: 400px; margin-left: 200px">保存</el-button>
    <el-button @click="quxiao" style="margin-top: 400px">取消</el-button>
  </el-drawer>
</template>

<style scoped></style>
